<template>
    <div>

        <el-card>
            <div slot="header" class="clearfix">
                <span>角色管理</span>
                <el-button-group style="float: right;">
                    <el-button icon="el-icon-refresh" size="small" plain onclick="window.location.reload()">刷新</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="dialogRoleAdd = true">新增</el-button>
                </el-button-group>
            </div>
            
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="role_id" label="ID" width="80"></el-table-column>
                <el-table-column prop="role_name" label="角色名称"></el-table-column>
                <el-table-column prop="role_desc" label="角色备注"></el-table-column>
                <el-table-column prop="created_time" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            plain
                            v-if="scope.row.role_code != 'baserole'"
                            @click="listEdit(scope.row.role_id)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="success"
                            plain
                            @click="rolePower(scope.row.role_id)">权限配置</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            plain
                            v-if="scope.row.role_code != 'baserole'"
                            @click="listDel(scope.row.role_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="text-center m-t">
                <el-pagination
                    v-if="dataTotal > 10"
                    @size-change="pageSizeChange"
                    @current-change="pageIndexChange"
                    :current-page="pageIndex"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTotal">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog v-if="dialogRoleAdd" title="新增角色" :visible.sync="dialogRoleAdd" append-to-body width="600px">
            <RoleAdd @closeDialog="closeDialog" @parentGetDataList="getDataList"></RoleAdd>
        </el-dialog>

        <el-dialog v-if="dialogRoleEdit" title="编辑角色信息" :visible.sync="dialogRoleEdit" append-to-body width="600px">
            <RoleAdd @closeDialog="closeDialog" @parentGetDataList="getDataList" :id="editId"></RoleAdd>
        </el-dialog>

        <el-dialog v-if="dialogRolePower" title="角色权限配置" :visible.sync="dialogRolePower" append-to-body width="540px">
            <RolePower @closeDialog="closeDialog" @parentGetDataList="getDataList" :id="editId"></RolePower>
        </el-dialog>
    </div>
</template>

<script>
import RoleAdd from './Add'
import RolePower from './RolePower'
export default {
    components: {
        RoleAdd,
        RolePower
    },
    data () {
        return {
            loading: false,
            editId: null,
            tableData: [],
            dialogRoleAdd: false, // 新增弹层
            dialogRoleEdit: false, // 新增弹层
            dialogRolePower: false, // 新增弹层
            pageIndex: 1, // 当前页码
            pageSize: 10, // 页码大小
            dataTotal: 0 // 数据总数
        }
    },
    created() {
        this.getDataList();
    },
    watch: {
    },
    methods: {
        // 获取字典值分页
        getDataList() {
            this.loading = true;
            this.$https.get('/api/company_role/page', {
                params: {
                    currentPage: this.pageIndex,
                    pageSize: this.pageSize
                }
            }).then((result) => {
                this.loading = false;
                if (result.data.code == 0) {
                    this.tableData = result.data.data.Items;
                    this.dataTotal = result.data.data.Total;
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        closeDialog(name) {
            this[name] = false;
        },
        listEdit(id) { // 修改
            this.editId = Number(id);
            this.dialogRoleEdit = true;
        },
        rolePower(id) { // 权限配置
            this.editId = Number(id);
            this.dialogRolePower = true;
        },
        listDel(id) { // 删除

            this.$confirm('您确定要将删除该角色吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$https.get('/api/company_role/delete?role_id=' + id).then((result) => {
                    if (result.data.code == 0) {
                        this.$message({
                            type: 'success',
                            showClose: true,
                            message: '删除成功',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList();
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: result.data.message
                        })
                    }
                })

            }).catch(() => {
            });
        },
        pageSizeChange(val) { // 分页：pageSize改变时
            this.pageSize = val;
            this.getDataList();
        },
        pageIndexChange(val) { // 分页：当前页码改变时
            this.pageIndex = val;
            this.getDataList();
        }
    }
}
</script>

<style scoped>
    .dicMain {
        padding: 0px 0px 20px 20px;
    }
</style>
